<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .mui-table-view .mui-media-object {
            line-height: 42px;
            max-width: 145px;
            height: 100px;
        }
        .jiage-text{
            font-size: 18px;
            color: red;
            margin-right:10px ;
        }
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body>


<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">购物车</h1>
    <button type="button" onclick="delCart()" class="mui-btn mui-btn-danger mui-btn-outlined" style="padding:5px 15px;border: 0;line-height: 18px; float: right;background: #ff3535;color: white;">
        删除
    </button>
</header>

<!--底部导航栏-->

<footer class="mui-bar-new mui-bar-tab-new" >
    <div class="mui-input-row mui-password" style="border: 0px;padding: 10px;">
        <button type="button" id="place"  class="mui-btn mui-btn-primary" onclick="submitOrder()" style="top: 0px; line-height: 18px; padding: 5px 15px;
            border: 0;background:#ff3535; text-align: left;width: auto;">结算</button>
        <button type="button" style="width: 70%;float:left;text-align:left;top: 0px;line-height:1;border: 0;background-color:#f7f7f7;"
                class="mui-btn mui-btn-primary" id="review">
            <span style="color: black;">应付:</span><span id="totalMoney" style="color: #ff3535;padding-left: 10px;font-size: 18px;"></span>
        </button>
    </div>
    <ul class="ful">
        <li>
            <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
                <img src="${base!}/assets/front/newH5/images/icon1.png" alt="" />
                <span>首页</span>
            </a>
        </li>
        <li class="active">
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon2_active.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
                <span>购物车</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
                <span>领券中心</span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="${base!}/assets/front/newH5/images/icon4.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
                <span>个人中心</span>
            </a>
        </li>
    </ul>
</footer>




<div class="mui-content simp_content" style="background: white;margin-bottom: 100px" id="vue" v-cloak>
    <ul class="mui-table-view">
        <li   class="mui-table-view-cell mui-checkbox  mui-left " v-for="item in member_carts" :key="item.id">
            <div class="" style="width: 100%;height: 100%">
                <div >
                    <input name="checkbox" id="ck" :cart-id="item.id" onchange="updatePrice(this)" type="checkbox" class="mui-checkbox " style="top: 40px;" checked>
                    <span style="display: none" name="goodPrice">{{item.price/100}}</span>
                </div>
                <div>
                    <a :href="'${base!}/open/h5/product/productDetail.html?id='+item.goodsId" style="padding-left: 0px;margin-left: 0px;">
                        <img class="mui-media-object mui-pull-left" style="width: 100px;height: 100px;" :src="item.imgurl">
                    </a>
                </div>
                <div class="mui-media-body" style="white-space:normal;font-size: 15px;margin-left: 125px;" >
                    <div class="mui-ellipsis-2">
                        {{item.productName}}
                    </div>
                    <div>
                        <p class='mui-ellipsis' style="    position: absolute;left: 178px;top: 60px;">
                            <span class="jiage-text">￥{{item.price/100}}</span>
                        </p>
                    </div>

                </div>
                <div style="width: 130px;height:30px;left: 16px;margin-top: 50px;" :item-id="item.goodsId" name="num"  class="mui-numbox cart-good-id" data-numbox-min='1' data-numbox-max='1000'>
                    <button class="mui-btn mui-btn-numbox-minus " onclick="minus(this)" type="button" >-</button>
                    <input onchange="updateNum(this)" onclick="selectThis(this)" class="mui-input-numbox" type="number" :value="item.num" />
                    <button class="mui-btn mui-btn-numbox-plus" onclick="add(this)" type="button">+</button>
                </div>

            </div>
        </li>
    </ul>

</div>
<div style="height: 50px">

</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">

    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    function add(a) {
        var num =  $(a).siblings("input").val()*1;
        var productId =  $(a).parent().attr("item-id");
        $(a).parent().siblings().children("input").prop("checked",true);
        $(a).siblings("input").val(1+num);
        $.ajax({
            type:"POST",
            url:"${base!}/open/h5/cart/updateCart.html",
            dataType:"JSON",
            data:{
                productId:productId,
                num:num+1
            },
            success:function(data){
                if (data.code == 0) {
                    var price = 0 ;
                    $("input[type='checkbox']:checked").each(function(index,item){
                        var n = $(this).parent().siblings().children("input[type='number']").val();
                        price =price+  $(this).siblings("span").text()*1*n;

                    });
                    var totalMoney = price.toFixed(2);
                    $("#totalMoney").html(totalMoney+"元");
                } else if(data.code==-1){
                    layer.open({
                        content: "库存不足!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    $(a).siblings("input").val(data.msg*1);
                    return;
                }
            }
        });
    }
    function minus(b) {
        var num =  $(b).siblings("input").val()*1;
        var productId =  $(b).parent().attr("item-id");
        $(b).parent().siblings().children("input[type='checkbox']").prop("checked",true);
        if(num>0){
            if(num==1){
                return ;
            }else {
                $(b).siblings("input").val(num-1);

            }
            $.ajax({
                type:"POST",
                url:"${base!}/open/h5/cart/updateCart.html",
                dataType:"JSON",
                data:{
                    productId:productId,
                    num:num-1
                },
                success:function(data){
                    if (data.code == 0) {
                        var price = 0 ;
                        $("input[type='checkbox']:checked").each(function(index,item){
                            var n = $(this).parent().siblings().children("input[type='number']").val();
                            price =price+  $(this).siblings("span").text()*1*n;

                        });
                        var totalMoney = price.toFixed(2);
                        $("#totalMoney").html(totalMoney+"元");
                    } else if(data.code==-1){
                        layer.open({
                            content: "库存不足!"
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        $(b).siblings("input").val(data.msg*1);
                        return;
                    }
                }
            });
        }

    }
    function selectThis(d) {
        $(d).parent().siblings().children("input").prop("checked",true);
    }
    function updateNum(c) {
        var productId =  $(c).parent().attr("item-id");
        $(c).parent().siblings().children("input").prop("checked",true);
        var num = $(c).val();
            if(num==1){
                return "";
            }else if(num<1){
                num=1;
                $(c).val(1);
            }
            $.ajax({
                type:"POST",
                url:"${base!}/open/h5/cart/updateCart.html",
                dataType:"JSON",
                data:{
                    productId:productId,
                    num:num
                },
                success:function(data){
                    if (data.code == 0) {
                        var price = 0 ;
                        $("input[type='checkbox']:checked").each(function(index,item){
                            var n = $(this).parent().siblings().children("input[type='number']").val();
                            price =price+  $(this).siblings("span").text()*1*n;

                        });
                        var totalMoney = price.toFixed(2);
                        $("#totalMoney").html(totalMoney+"元");
                    }else if(data.code==-1){
                        layer.open({
                            content: "库存不足!"
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        $(c).val(data.msg*1);
                        return;
                    }
                }
            });
    }
    function updatePrice(e) {
        window.setTimeout(function () {
            var price = 0 ;
            $("input[type='checkbox']:checked").each(function(index,item){
                var n = $(this).parent().siblings().children("input[type='number']").val();
                price =price+  $(this).siblings("span").text()*1*n;

            });
            // if(price!=0){
                var totalMoney = price.toFixed(2);
                $("#totalMoney").html(totalMoney+"元");
            // }
        },500);
    }
    function delCart() {
        var cartIds ="";
        $("input[type='checkbox']:checked").each(function(index,item){
            var id = $(this).attr("cart-id");
           if(cartIds==""){
                    cartIds=id;
                }else {
                    cartIds=cartIds+";"+id;
                }
        });
        $.ajax({
            type:"POST",
            url:"${base!}/open/h5/cart/deleteCart.html",
            dataType:"JSON",
            data:{
                cartIds:cartIds
            },
            success:function(data){
                if (data.code == 0) {
                    window.location.reload();
                }
            }
        });

    }
    function submitOrder() {
        var cartIds ="";
        $("input[type='checkbox']:checked").each(function(index,item){
            var id = $(this).attr("cart-id");
            if(cartIds==""){
                cartIds=id;
            }else {
                cartIds=cartIds+";"+id;
            }
        });
        if(cartIds==""||cartIds==null||cartIds==undefined){
            layer.open({
                content: '请先加入商品到购物车！'
                ,skin: 'msg'
                ,time: 2
            });
            return;
        }
        $.ajax({
            type:"POST",
            url:"${base!}/open/h5/order/submitOrder.html",
            dataType:"JSON",
            data:{
                cartIds:cartIds
            },
            success:function(data){
                if (data.code == 0) {
                    window.location.href="${base!}/open/h5/order/orderConfirmation.html?productList="+encodeURIComponent(data.data)+"&cartIds="+cartIds;
                }else {
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }
            }
        });
    }
    //          $(".carLi").click(function (event) {
    //              event.preventDefault();
    //          });
    // $('li').unbind('click');
    var vue = new Vue({
        el: '#vue',
        data: {
            member_carts: [],
        },
        created:function () {   //实例初始化创建完成执行

            this.getCarts()     //调用自身方法

        },
        methods:{              //定义封装方法
            //获取列表
            getCarts:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cart/getCart.html",
                    dataType:"JSON",
                    data:{

                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.member_carts = d;
                            var total = 0;
                            if(d!=null){
                                for (var i =0;i<d.length;i++){
                                    total = total+d[i].price*1*d[i].num;
                                }
                            }
                            var tm = total/100;
                            var totalMoney = tm.toFixed(2);
                            $("#totalMoney").html(totalMoney+"元");
                        } else if(data.code == -1){
                            layer.open({
                                content: '您没有登录，请登录！'
                                ,btn: '去登录',
                                end:function(){
                                    window.location.href="${base!}/open/H5/login/login.html"
                                }
                            });
                        }
                    }
                });

            }
        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    })

</script>
</body>
</html>
